﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sudo Slider | Thumbnails 2</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<link rel="STYLESHEET" type="text/css" href="../css/style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
	<script type="text/javascript">
	    $(document).ready(function () {
	        var ajaximages = [
			    '../images/01.jpg',
			    '../images/02.jpg',
			    '../images/03.jpg',
			    '../images/04.jpg',
			    '../images/05.jpg'
	        ];
	        var imagestext = [
			    'Just another beautiful sunset',
			    'Behind another beautiful sunset',
			    'Mountains in the Alps',
			    'Road and mountains in the Alps',
			    'A goat in norway'
	        ];

            var totalSlides = ajaximages.length;

	        $(document).ready(function () {
	            // Initializing. 
	            var mainSlider = $("#slider").sudoSlider({
	                continuous: true,
	                preloadajax: true,
                    effect: "fade",
	                controlsFade: false,
	                ajax: ajaximages,
                    ajaxLoad: function (t) {
	                    // Caption.
	                    $(this).css("position", "relative").append('<div class="caption" >' + imagestext[t - 1] + '</div>');
	                },
	                beforeAnimation: function (t) {
	                    // Caption
	                    $(this).children('.caption').hide();

	                    // Thumbnails fade to which is current.
                        var allSlides = controlsSlider.children().children();
                        var currentThumbnail = controlsSlider.getSlide(t).add(controlsSlider.getSlide(t + totalSlides)).add(controlsSlider.getSlide(t + 2 * totalSlides));
                        allSlides.not(currentThumbnail).fadeTo(400, 0.5);
	                    currentThumbnail.fadeTo(400, 1);

                        var dir = (t - 1) + totalSlides;
                        var currentSlide = controlsSlider.getValue("currentSlide");
                        var diff = -currentSlide + dir;
                        var targetSlide = dir;

                        var newDiff = -currentSlide + dir + totalSlides;
                        if (Math.abs(newDiff) < Math.abs(diff)) {
                            targetSlide = dir + totalSlides;
                            diff = newDiff;
                        }

                        newDiff = -currentSlide + dir - totalSlides;
                        if (Math.abs(newDiff) < Math.abs(diff)) {
                            targetSlide = dir - totalSlides;
                        }

                        controlsSlider.goToSlide(targetSlide);
	                },
	                afterAnimation: function (t) {
	                    // Caption.
	                    $(this).children('.caption').slideDown(400);
	                }
	            });
                // The controls slider
                var controlsSlider = $("#sliderControls").sudoSlider({
                    ajax: ajaximages.concat(ajaximages).concat(ajaximages),
                    prevNext: false,
                    slideCount: 4,
                    moveCount: 2,
                    startSlide: totalSlides,
                    continuous: true,
                    customLink: "#sliderControlsContainer .controls a",
                    ajaxLoad: function (t) {
                        // Width to height ratio.
                        $img = $(this).find('img');
                        var height = $img.height("auto").height();
                        var width = $img.width("auto").width();
                        var widthToHeight = width / height;
                        // Width of slider is 696. I use 7 px of spacing between each thumbnail. And i have 4 thumbnails.
                        var thumbNailWidth = (696 - 7 * 3) / 4;
                        var thumbNailHeight = thumbNailWidth / widthToHeight;

                        $img.width(thumbNailWidth).height(thumbNailHeight);
                        controlsSlider.adjust();
                        $img.attr("data-target", t);
                        // I got some CSS that makes sure that the image is only shown, when the class loaded is added.
                        $img.addClass("loaded");

                        // Making sure all thumbnails are faded except the current one.
                        if (t % totalSlides != mainSlider.getValue("currentSlide")) {
                            controlsSlider.getSlide(t).fadeTo(0, 0.5);
                        }
                    },
                    afterAnimation: function (t) {
                        if (t <= totalSlides) {
                            controlsSlider.goToSlide(t+totalSlides, 0);
                        } else if (t > 2 * totalSlides) {
                            controlsSlider.goToSlide(t-totalSlides, 0);
                        }
                    }
                });

	            // Making the thumbnails do something.
	            $("#sliderControls").on("click", "img", function () {
	                var slide = $(this).attr("data-target");
	                mainSlider.goToSlide(Number(slide) % totalSlides);
	            });
	        });
	    });
    </script>
	<style>
        .caption {
            position:absolute;
            bottom:0;
            left:0;
            width:696px;
            height:25px;
            text-align:center;
            color: #000000;
            background: #ffffff;
            background:transparent;
            background:rgba(255,255,255,0.7);
            /* Getting a semi-transparent background in IE */
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
            zoom: 1;
        }
        #sliderControls {
            margin-top:10px;
        }
        #sliderControls img{
            border:none;margin: 0 7px 0 0;cursor:pointer;
        }
        #sliderControls img:not(.loaded) {
            opacity: 0.001;
            height:10px;
        }
        #sliderControlsContainer .controls a {
            top: -10px;
        }
	</style>


	
</head>
<body>
<div id="container">
	<h1>Sudo Slider jQuery Plugin - Thumbnails 2</h1>
	<div style="position:relative;">
        <div style="position: relative;">
            <div id="slider"></div>
        </div>
        <div id="sliderControlsContainer" style="position: relative;">
            <div id="sliderControls"></div>
            <span class="controls">
                <a href="javascript:void(0);" data-target="prev" class="prevBtn"></a>
                <a href="javascript:void(0);" data-target="next" class="nextBtn"></a>
            </span>
        </div>
    </div>
	<h3>Usage</h3>
	<h4>See the source code.</h4>
</div>

<div style="width:728px;height:90px;margin:0 auto;">
	<script type="text/javascript">
		<!--
		google_ad_client = "pub-8170632875475442";
		/* Sudo Slider, lang horisontal */
		google_ad_slot = "0149025622";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>